<template>
  <div class="application-form">
    <div class="application-form-info">
      <div class="info-box">
        <div class="info-text">申请事项&nbsp;:</div>
        <div class="info-input">{{matter}}</div>
      </div>
      <div class="info-box">
        <div class="info-text">申&nbsp;&nbsp;请&nbsp;&nbsp;人:</div>
        <div class="info-input">{{applicationPeople}}</div>
      </div>
      <div class="info-box">
        <div class="info-text">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</div>
        <div class="info-input">{{phone}}</div>
      </div>
      <div class="info-box">
        <div class="info-text">微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信&nbsp;:</div>
        <div class="info-input">{{wechat}}</div>
      </div>
      <div class="info-box">
        <div class="info-text">申请金额&nbsp;:</div>
        <div class="info-input">{{money}}</div>
      </div>
      <div class="info-box-mode">
        <div class="info-text">&nbsp;&nbsp;申请说明&nbsp;:</div>
        <div class="info-input">{{info}}</div>
      </div>
    </div>
    <!-- <div class="application-form-btn" @click='feeApplication'>提交</div> -->
  </div>
</template>

<script>

export default {
  data() {
    return {
      matter:'',//申请事项
      applicationPeople:'',//申请人
      phone:'',
      wechat:'',
      money:'',
      info:''
    }
  },
  methods: {
    async feeApplyDetail(){
      //获取费用申请详情
      let id=this.$root.$mp.query.id;
      const res=await this.$api.feeApplyDetail({
        id:id
      })
      if(res.data.level=='success'){
        const data=res.data.data;
        this.matter=data.matter;
        this.applicationPeople=data.application_people;
        this.phone=data.phone;
        this.wechat=data.wechat;
        this.money=data.money;
        this.info=data.info;
      }
    },
    initData(){
      //恢复原始状态
      this.matter='';
      this.applicationPeople='';
      this.phone='';
      this.wechat='';
      this.money='';
      this.info='';
    }
  },
  onShow(){
    this.initData();
    this.feeApplyDetail()
  }
} 
</script>

<style lang="scss" scoped>
  .application-form{
    width: 100%;
    overflow-x: hidden;
    height: 100vh;
    background-color: #f1f1f1;
    padding-top: 20rpx;
    .info-text{
      flex: 1;
      text-align: center;
    }
    .info-input{
      flex: 2;
    }
    .application-form-info{
      width: 100%;
      background-color: #fff;
      .info-box{
        border: 1px solid #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        padding: 20rpx;
      }
      .info-box-mode{
        display: flex;
        justify-content: center;
        font-size: 16px;
        padding: 20rpx;
        .info-text{
          width: 100%;
          height: 200rpx;
        }
        .info-input{
          border: 1px #f1f1f1 solid;
        }
        .info-mode{
          padding: 20rpx;
          width: 100%;
          height: 200rpx;
        }
      }
    }
    .application-form-btn{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      background-color: rgb(110, 189, 235);
      color: #fff;
      font-size: 16px;
      :active{
        background-color: rgb(6, 127, 240);
      }
    }
    .region-content{
      color: #666;
    }
  }
</style>